<template>
	<gracePage :isSwitchPage="true" :customHeader="false" :isLoading="pageLoading" loadingBG="rgba(255,255,255,1)">
		<view slot="gBody" class="grace-flex-v1" id="gBody">
			<view class="grace-news-header grace-rows grace-flex-vcenter bg-white">
				<graceNavBar :items="tabs" :currentIndex="currentIndex" @change="navChange" :size="180" activeFontSize="30rpx"
				 lineHeight="70rpx" activeColor="#3FA075" activeLineBg="linear-gradient(to right, #39b54a,#3FA075)"></graceNavBar>
			</view>
			<swiper :style="{height:mainHeight+'px'}" :current="currentIndex" @change="swiperChange">
				<swiper-item v-for="(news, newsIndex) in newsAll" :key="newsIndex">
					<scroll-view scroll-y="true" :style="{height:mainHeight+'px'}" @scroll="scroll" @scrolltolower="scrollend"
					 @touchstart="touchstart" @touchmove="touchmove" @touchend="touchend">
						<view style="padding:10rpx 10rpx;">
							<graceReload ref="graceReload" width="700rpx" :reloadBgColor="['', '', '#3FA075']" :reloadColor="['#999999', '#3FA075', '#FFFFFF']"
							 marginLeft="25rpx" @reload="reload"></graceReload>
							<view class="grace-article-list">
								<view class="grace-article-list-item margin-bottom grace-shadow" v-for="(item, index) in news" :key="index"
								 @tap="goDetail(item)">
									<view style="width:100%;">
										<text class="grace-article-list-title text-lg" :style="{lineHeight:titleStyle.lineHeight, color:titleStyle.color}">{{item.title}}</text>
									</view>
									<view class="grace-article-list-img1">
										<gImg :src="item.cover[0]" :width="700" :height="300"></gImg>
									</view>
									<!-- <view class="grace-article-list-footer">
									<text class="grace-article-list-footer-items grace-icons">&#xe69e; 11</text>
									<text class="grace-article-list-footer-items grace-icons grace-text-center">&#xe609; 22</text>
									<text class="grace-article-list-footer-items grace-icons grace-text-right">&#xe64c; 33</text>
								</view> -->
								</view>
							</view>
							<graceLoading :loadingType="loadingTypes[newsIndex]"></graceLoading>
						</view>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
	</gracePage>
</template>
<script>
	import gracePage from "../../plugin/graceUI/components/gracePage.vue";
	import graceLoading from "../../plugin/graceUI/components/graceLoading.vue";
	import graceNavBar from "../../plugin/graceUI/components/graceNavBar.vue";
	import graceReload from "../../plugin/graceUI/components/graceReload.vue";
	import dateUtils from '@/common/util/dateUtils.js';
	import gImg from "../../plugin/graceUI/components/graceImg.vue";
	export default {
		data() {
			return {
				pageSize: 10,
				// 列表区域高度
				mainHeight: 350,
				// 分类数据
				tabsAll: [],
				tabs: [],
				currentIndex: 0,
				// 新闻信息保存数组
				newsAll: [], //数组中放数组，栏目个数作为数组个数，每个数组下存放该栏目下的新闻数组
				// 每个选项卡对应的分页
				pages: [],
				// 加载状态
				loadingTypes: [],
				// 每个滚动区域的滚动值
				scrollTops: [],
				scrollTimer: null,
				pageLoading: true,
				columnListUrl: this.$config.apiUrl + "/dasColumnController/listColumn",
			}
		},
		onLoad: function() {
			this.getNewsCate();
		},
		onReady: function() {
			uni.createSelectorQuery().select('#gBody').fields({
				size: true
			}, (res) => {
				this.mainHeight = res.height - uni.upx2px(100);
				this.pageLoading = false;
			}).exec();
		},
		watch: {
			currentIndex: function(nVal, oldVal) {
				if (this.newsAll[this.currentIndex].length > 0) {
					return;
				}
				if ((this.loadingTypes[this.currentIndex] == 3)) {
					this.getNews();
				}
			}
		},
		props: {
			articles: {
				type: Array,
				default: function() {
					return [];
				}
			},
			titleStyle: {
				type: Object,
				default: function() {
					return {
						'lineHeight': '50rpx',
						'fontSize': '36rpx',
						'color': '#323232'
					};
				}
			}
		},
		methods: {
			// 导航切换
			navChange: function(e) {
				// console.log(e);
				// console.log(this.tabsAll[e].title);
				this.currentIndex = e;
			},
			swiperChange: function(e) {
				var index = e.detail.current;
				this.currentIndex = index;
			},
			// 获取头部栏目分类 
			getNewsCate: function() {
				this.$http.get(this.columnListUrl, {
					params: {
						id: ''
					}
				}).then(res => {
					if (res.data.ok) {
						let columnList = res.data.data;
						this.tabsAll = columnList;
						// console.log(this.tabsAll);
						// 初始化新闻列表数组 元素数量与分类匹配
						for (var i = 0; i < this.tabsAll.length; i++) {
							this.newsAll.push([]);
							this.tabs.push(this.tabsAll[i].title);
							this.pages.push(1);
							this.loadingTypes.push(3);
							this.scrollTops.push(0);
						}
						// 第一次加载新闻列表
						this.getNews();
					}
				}).catch(err => {
					console.log(err);
				});
			},
			// 获取新闻列表 [ 数据应来自api ] 
			getNews: function(isReload) {
				// 当前正在展示的 选项index 为 this.currentIndex
				// 那么分类 id 应该为 this.tabsAll[this.currentIndex].id
				// 使用内部变量记录 当前索引，避免加载时用户切换引起的变量变化
				var currentIndex = this.currentIndex;
				this.loadingTypes.splice(currentIndex, 1, 1);
				if (isReload) {
					setTimeout(() => {
						this.$refs.graceReload[currentIndex].endReload();
					}, 300)
				}
				uni.request({
					url: this.$config.apiUrl + "/dasArticleController/list/" + this.pages[currentIndex] + "/" + this.pageSize,
					data: {
						columnId: this.tabsAll[this.currentIndex].id,
					},
					success: res => {
						if (res.data.ok) {
							console.log(res)
							let list = res.data.data
							if (list.length > 0) {
								for (var i = 0; i < list.length; i++) {
									let imgUrl = [];
									let imgList = [];
									imgUrl = (list[i].cover == null || list[i].cover == "") ? '' : list[i].cover.split(",");
									if (imgUrl == '') {
										list[i].cover = ['/static/cover.jpg'];
									} else {
										for (var j = 0; j < imgUrl.length; j++) {
											if (imgUrl[j] != '' && imgUrl[j] != null) {
												var imgSerUrl = this.$config.imgUrl + '/' + imgUrl[j];
												imgList.push(imgSerUrl);
											}
										}
										list[i].cover = imgList;
									}
								}
							}
							// 填充新闻数据
							if (this.pages[currentIndex] == 1) {
								this.newsAll.splice(currentIndex, 1, list);
							} else {
								this.newsAll.splice(currentIndex, 1, this.newsAll[currentIndex].concat(list));
							}
							// 页码增加
							this.pages[currentIndex]++;

							//判断是否继续加载数据
							if (list.length < this.pageSize) {
								this.loadingTypes.splice(currentIndex, 1, 2); //已加载全部
							} else {
								this.loadingTypes.splice(currentIndex, 1, 3);
							}

						}
					},
					fail: (data, code) => {
						console.log('fail' + JSON.stringify(data));
					}
				});
			},
			// 滚动加载更多
			scrollend: function() {
				if (this.loadingTypes[this.currentIndex] != 3) {
					return false;
				}
				// console.log('loadmore.....');
				this.getNews();
			},
			// 滚动记录
			scroll: function(e) {
				if (this.scrollTimer != null) {
					clearTimeout(this.scrollTimer);
				}
				this.scrollTimer = setTimeout(() => {
					this.scrollTops.splice(this.currentIndex, 1, e.detail.scrollTop);
				}, 100);
			},
			// 手势数据传递
			touchstart: function(e) {
				var touchObj = {
					scrollTop: this.scrollTops[this.currentIndex],
					moveY: e.changedTouches[0].pageY
				};
				this.$refs.graceReload[this.currentIndex].touchstart(touchObj);
			},
			touchmove: function(e) {
				var touchObj = {
					scrollTop: this.scrollTops[this.currentIndex],
					moveY: e.changedTouches[0].pageY
				};
				this.$refs.graceReload[this.currentIndex].touchmove(touchObj);
			},
			touchend: function(e) {
				var touchObj = {
					scrollTop: this.scrollTops[this.currentIndex],
					moveY: e.changedTouches[0].pageY
				};
				this.$refs.graceReload[this.currentIndex].touchend(touchObj);
			},
			// 下拉刷新
			reload: function() {
				this.pages[this.currentIndex] = 1;
				this.loadingTypes.splice(this.currentIndex, 1, 3);
				this.getNews(1);
			},
			// 点击查看详情
			goDetail: function(e) {
				// console.log(e);
				var articleId = e.id;
				let detail = {
					author_name: e.createName,
					cover: e.cover[0],
					id: e.id,
					published_at: e.publishTime,
					title: e.title
				};
				// 打开详情页面
				uni.navigateTo({
					url: './nkkt_detail?detailDate=' + encodeURIComponent(JSON.stringify(detail))
				});
			}
		},
		components: {
			gracePage,
			graceLoading,
			graceNavBar,
			graceReload,
			gImg
		}
	}
</script>
<style>
	.grace-body {
		padding: 0 5rpx;
		width: 700rpx;
	}

	.grace-news-header {
		background-color: #FFFFFF;
		height: 100rpx;
		padding: 0 25rpx;
	}

	page {
		background-color: #ffffff;
	}

	.grace-text-small {
		margin-top: 10px;
	}

	.grace-article-list {}

	.grace-article-list-item {
		width: 100%;
		overflow: hidden;
		padding: 5rpx;
		border-bottom: 10rpx solid #F8F8F8;
		box-sizing: border-box;
	}

	.grace-article-list-title {
		display: block;
		width: 100%;
		overflow: hidden;
	}

	.grace-article-list-img1 {
		margin-top: 15rpx;
	}

	.grace-article-list-more-imgs {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		flex-wrap: nowrap;
	}

	.grace-article-list-img2-in {
		width: 335rpx;
		height: 200rpx;
		padding: 10rpx 0;
	}

	.grace-article-list-img3-in {
		width: 220rpx;
		height: 150rpx;
		padding: 10rpx 0;
	}

	.grace-article-list-footer {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		padding-top: 20rpx;
	}

	.grace-article-list-footer-items {
		width: 33.3%;
		line-height: 50rpx;
		font-size: 26rpx;
		color: #888888;
		display: block;
	}
</style>
